<template>
	<view>
		<!-- 搜索框等内容 -->
		<view class="searchinputview">
			<view class="searchinputs">
				<input type="text" value="" placeholder="请输入关键字" v-model="inputValue"/>
			</view>
			<view class="search-btn" @click="starsearch" >搜索</view>
		</view>
		
		<view class="searchHistory" v-if="showsHistory">
			<view class="searchtitle">
				<text>搜索历史</text>
				<image src="../../static/tab/shanchu.png" mode="" @click="removeSror"></image>
			</view>
			<view class="searchaddress">
				<block v-for="(item,index) in historyStor":key="index">
					<text @click="historyClick(item)">{{item}}</text>
				</block>
			</view>
		</view>
		
		
		<!-- 搜索结果渲染的内容 -->
		<view class="active">
			<view class="conteng">
				<block v-for="(item,index) in databaseData" :key='index'>
					<view class="conteng-article">
						<view class="conteng-img" @click="xiangqin(item._id)">
							<block v-for="(itemimg,index) in item.datainfo.travelsIma" :key='index'>
								<image :src="itemimg" mode="" v-if="index==0"></image>
							</block>
						</view>
						<view class="conteng-introduce">
							<view class="active-name">{{item.datainfo.biaotiOne}}</view>
							<view class="active-title">{{item.datainfo.biaotiTwo}}</view>
						</view>
						<view class="purchase">
							<image :src="item.datainfo.avatarUrl" mode="widthFix"></image>
							<text class="active-buy">{{item.datainfo.nickName}}</text>
						</view>
					
					</view>
				</block>
			</view> 
		</view>
		
		<!-- 没有搜索结果显示空 -->
		<vue-kong v-if="kongs"></vue-kong>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputValue:'',
				historyStor:[],
				showsHistory:false,
				databaseData:[] ,//搜索获取的数据
				kongs:false   	//搜索不到内容显示
			}
		},
		methods: {
			//拿到每个数据的id
			xiangqin(id){
				console.log(id)
				uni.navigateTo({
					url:'../detils/detils?id='+id
				})
			},
			//搜索历史存入本地存储
			starsearch(){
				let values = this.inputValue
				if(values!=''){
					const searchArry = uni.getStorageSync('search_key')||[]
					searchArry.unshift(values)
					 uni.setStorageSync('search_key', searchArry);
				}
				this.inputValue = '' 
				//获取数据渲染后页面刷新
				this.getStorage()
				
				//查询数据库
				this.searchData(values)
				this.showsHistory = false
			},
			
			//将本地存储的数据取出来
			getStorage(){
				const stor = uni.getStorageSync('search_key')
				// console.log(stor)
				let newArray = Array.from(new Set(stor))
				// console.log(newArray)
				if(stor == ''){
					this.showsHistory = false
				}else{
					this.showsHistory = true
					this.historyStor = newArray
				}
			},
			//清除本地缓存
			removeSror(){
				 uni.removeStorageSync('search_key');
				 //刷新一下
				 this.getStorage()
			},
			
			//查询数据库
			searchData(values){
				const db = wx.cloud.database()
				db.collection('userdata').where({
					datainfo:{
						biaotiOne:db.RegExp({
							regexp:values,
							options:'m'
						})
					}
				}).get().then(res=>{
					console.log(res)
					this.databaseData = res.data
					if(res.data.length==0){
						this.kongs = true
					}else{
						this.kongs = false
					}
				}).catch(err=>{
					console.log(err)
				})
			},
			
			//点击搜索历史再次查询
			historyClick(item){
				this.searchData(item)  //调用查询
				this.showsHistory = false
			}
		},
		created() {
			//初次进入页面刷新一下
			this.getStorage()
		}
	}
</script>

<style lang="scss">
	// 搜索渲染的样式
	
	@import '../../element/uni.css';
	
	.searchinputview{
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 20upx 20upx;
		box-sizing: border-box;
		.searchinputs{
			box-sizing: border-box;
			background-color: #eeeeee;
			width: 85%;
			height: 60upx;
			border-radius: 40upx;
			line-height: 60upx;
			padding: 5upx 20upx 10upx 20upx;
			input{
				width: 100%;
				height: 100%;
			}
		}
		.search-btn{
			
		}
	}
	
	.searchHistory{
		display: flex;
		flex-direction: column;
		.searchtitle{
			text{
				font-weight: bold;
			}
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30upx 30upx;
			image{
				width: 40upx;
				height: 40upx;
			}
		}
		.searchaddress{
			display: flex;
			justify-content: start;
			align-items: center;
			flex-wrap: wrap;
			text{
				padding: 10upx 25upx;
				border: 1px solid #dfdfdf;
				margin: 20upx 10upx;
				border-radius: 15upx;
			}
		}
	}
</style>
